<template>
  <view v-if="shade">
    <view @click="navigateBtn()" class="play_back2">
      <image src="@/static/img/play_back.png" mode=""></image>
    </view>
    <video class="video_play" id="myVideo" :src="vedioUrl" controls></video>
    <view class="vod_name1" v-if="list">
      <span>{{list[0].vod_name}}</span>
      <span style="width: 150rpx;" @click="isTrue = true">视频简介></span>
    </view>
    <view class="vod_name" v-if="list">
      <view>{{list[0].vod_addtime || '2021:11:27'}}发布</view>
      <view class="gongneng">
        <view class="gongneng1">
          <picker @change="bindPickerChange" :value="index" :range="array">
            <image src="@/static/img/action_report.png" mode=""></image>
            <view class="uni-input">
              <p>反馈</p>
            </view>
          </picker>
        </view>
        <view class="gongneng1" @click="sczt(list[0].vod_id)">
          <image v-if="scztList.indexOf(list[0].vod_id) == -1" src="@/static/img/action_collect.png" mode=""></image>
          <image v-else src="@/static/img/action_collect_active.png" mode=""></image>
          <p>收藏</p>
        </view>
        <view class="gongneng1" @click="share()">
          <image src="@/static/img/action_share.png" mode=""></image>
          <p>分享</p>
        </view>
      </view>
    </view>
    <!-- <view v-if="list && list[1] && list[1].ad_pic"
      :style="{'backgroundImage':'url('+list[1].ad_pic+')' }" >
    </view> -->
    
    <image class="image22" v-if="list && list[1] && list[1].ad_pic" :src="list[1].ad_pic" mode="widthFix" @click="jumpBtn(list[1].ad_url)"></image>
    <view class="indexzxitem10" v-if="list">
      <view class="index_flex">
        <text class="indexzx_te1">相关标签</text>
      </view>
      <view class="index_flex2" @click="jumpBtn3()">
        <!-- <image src="@/static/img/hyh.png" mode="widthFix"></image> -->
        <text class="indexzx_te2">更多</text>
      </view>
    </view>
    <scroll-view v-if="indexInList" style="margin-bottom: 20rpx;" scroll-x class="nav" scroll-with-animation>
      <view class="cu-item" :data-id="index" v-for="(item,index) in indexInList" :key="index">
        <view class="cu-item_s" @click="tabSelect(item)">
          <view class="fl_item_img" :style="{'backgroundImage':'url('+item.t_pic+')' }"></view>
        </view>
        <view class="cu-item_te">{{ item.t_name}}</view>
      </view>

    </scroll-view>
    <view class="indexbox">
      <view class="indexzxitem10">
        <view class="index_flex">
          <text class="indexzx_te1">抖音视频</text>
        </view>
        <view class="index_flex2" @click="refreshBtn()">
          <image src="@/static/img/hyh.png" mode="widthFix"></image>
          <text class="indexzx_te2">换一换</text>
        </view>
      </view>

      <!-- <view class="image11" v-if="zxlist && item.vod_url" v-for="(item ,index) in zxlist" :key="index"
        @click="jumpBtn2(item.vod_url)">
        <image :src="item.vod_pic" mode="widthFix"></image>
      </view> -->

      <view class="indexbox_left" v-for="(item,index) in zxlist" :key="index">
        <view class="image11" @click="jumpBtn2(item.vod_url)" :style="{'backgroundImage':'url('+item.vod_pic+')' }"
          v-if="item.vod_url">

        </view>
        <view class="" v-else @click="playBtn(item)">
          <view class="VIP_img" v-if="item.vod_vip == 2">
            VIP
          </view>
          <view class="inox_left_img" v-if="item.vod_pic" :style="{'backgroundImage':'url('+item.vod_pic+')' }"></view>
          <view class="inox_left_img" v-else :style="{'backgroundImage':'url('+gifUrl+')' }">
          </view>
          <image class="inox_left_icon" src="@/static/img/collect_btn.png" v-if="scztList.indexOf(item.vod_id) == -1"
            @click.stop="sczt(item.vod_id)" mode="widthFix"></image>
          <image class="inox_left_icon" src="@/static/img/collect_btn_active.png" v-else @click.stop="sczt(item.vod_id)"
            mode="widthFix"></image>

          <view class="inl_content">{{ item.vod_name }}</view>
        </view>
      </view>
    </view>
    <!-- <u-picker :show="show" :columns="columns"></u-picker>
    <u-button @click="show = true">打开</u-button> -->

    <view :class="isTrue ? 'addlog': 'addlog1'">
      <view class="guanbi" @click="isTrue = false">
        ×
      </view>
      <view class="title">
        视频简介
      </view>
      <view class="h1">
        {{list[0].vod_name}}
      </view>
      <view class="h2">
        视频分类：{{list[0].vod_tname}}
      </view>
      <view class="h2">
        主要演员：{{list[0].vod_star}}
      </view>
      <view class="h2">
        视频标签：
        <view class="h3" v-for="(item,index) in indexInList" :key="index">
          {{item.t_name}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isTrue: false,
        show: false,
        array: ['无法播放', '标题与内容不符', '视频没有声音', '视频有点卡', '这类视频不错，想看更多'],
        index: 0,
        vedioUrl: '',
        backUrl: '',
        list: [],
        tab1: 0,
        shade: false,
        scztList: [],
        gifUrl: 'https://www.tmtv777.com/img/logo.1cecf4f4.gif',
        zxlist: [],
        indexInList: []
      }
    },
    methods: {
      jumpBtn2(url) {
        plus.runtime.openURL(url, function() {
          console.log(res, 123)
        })
      },
      jumpBtn3() {
        uni.setStorageSync('num', 3);
        uni.switchTab({
          url: '/pages/filters/index'
        })
      },
      bindPickerChange: function(e) {
        let num = e.target.value;
        this.$http.fankui({
          id: uni.getStorageSync('token'),
          t: this.array[num],
          p: this.list[0].vod_id
        }).then(res => {
          uni.showModal({
            title: '提交成功，感谢支持！',
            content: '反馈:' + this.array[num],
            success: function(res) {

            },
          })
        })
      },
      jumpBtn(url) {
        plus.runtime.openURL(url, function() {
          console.log(res, 123)
        })
      },
      navigateBtn() {
        uni.navigateBack();
      },
      share() {
        uni.navigateTo({
          url: '/pages/share'
        })
      },
      /**
       * 收藏
       */
      sczt(scid) {
        this.scztList = uni.getStorageSync('vod_id') || [];
        this.$http.sczt({
          scid: scid,
          token: uni.getStorageSync('phone')
        }).then(res => {
          if (res.code == 200) {
            if (res.message == '收藏成功') {
              this.$toast(res.message)
              this.scztList.push(scid);
              uni.setStorageSync('vod_id', this.scztList)
            } else if (res.message == '取消收藏') {
              this.scztList = uni.getStorageSync('vod_id') || [];
              this.scztList.slice().reverse().forEach((item, index, arr1) => {
                if (item === scid) {
                  this.scztList.splice(arr1.length - 1 - index, 1);
                }
              });
              uni.setStorageSync('vod_id', this.scztList)
              this.$toast(res.message)
            }
          }
        })
      },
      playBtn(item) {
        uni.showLoading({
          title: '加载中'
        })
        this.$http.vod({
          t: uni.getStorageSync('token'),
          playid: item.vod_id
        }).then(res => {
          if (res.code == 200) {
            this.list = res.data.play;
            this.vedioUrl = res.data.play[0].vod_url;
            this.backUrl = res.data.play[0].vod_tpic;
            this.indexInList = res.data.play.tag;
            uni.pageScrollTo({
              scrollTop: 0,
              duration: 100
            });
            setTimeout(() => {
              uni.hideLoading();
            }, 500)
          }
        })
        this.$http.zxlist({
          tid: 2
        }).then(res => {
          this.zxlist = res.data.zxlist;
        })

      },

      tabSelect(item) {
        uni.navigateTo({
          url: `tags/index?tag=tag&id=${item.t_id}`
        })
      },
      refreshBtn() {
        uni.showLoading({
          title: '加载中'
        })
        this.$http.zxlist({
          tid: 2
        }).then(res => {
          this.zxlist = res.data.zxlist;
          uni.hideLoading();
        })
      }
    },
    onShow() {
      let token = uni.getStorageSync('token') || 'none';
      if (token == 'none') {
        uni.showModal({
          title: '提示',
          content: "请登录！",
          success: function(res) {
            if (res.confirm) {
              uni.reLaunch({
                url: '/pages/login/index'
              });
            } else if (res.cancel) {
              uni.navigateBack();
            }
          }
        })
      }
    },
    onLoad(opt) {
      uni.showLoading({
        title: '加载中'
      })
      this.$http.zxlist({
        tid: 2
      }).then(res => {
        this.zxlist = res.data.zxlist;
      })
      this.$http.vod({
        t: uni.getStorageSync('token'),
        playid: opt.playid || 3
      }).then(res => {
        if (res.code == 200) {
          setTimeout(() => {
            this.shade = true;
          }, 50)
          this.list = res.data.play;
          this.vedioUrl = res.data.play[0].vod_url;
          this.backUrl = res.data.play[0].vod_tpic;
          this.indexInList = res.data.play.tag;
          uni.hideLoading()
        }
      })


      this.scztList = uni.getStorageSync('vod_id') || [];
      this.$http.usersList({
        id: uni.getStorageSync('token')
      }).then(res => {
        if (res.code == 200) {
          this.userList = res.data.users[0];
          if (this.userList.ucs == 0) {
            uni.showModal({
              title: ' 您的观看次数如不足，请充值！',
              showCancel: false,
              success(res4) {
                uni.reLaunch({
                  url: '/pages/my/index'
                });
              }
            })
          }
        }
      })
    }
  }
</script>

<style lang="less">
  .video_play {
    width: 100%;
  }

  .vod_name {
    display: flex;
    justify-content: space-between;
    padding: 10rpx;

    .gongneng {
      display: flex;
      justify-content: center;

      .gongneng1 {
        margin-right: 30rpx;
        flex: 1;
        text-align: center;

        image {
          width: 30rpx;
          height: 30rpx;
        }
      }
    }
  }

  .vod_name1 {
    display: flex;
    justify-content: space-between;
    padding: 10rpx;
  }

  .indexbox {
    margin-bottom: 30rpx;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;

    .indexbox_left {
      position: relative;
      margin-left: 15rpx;
      margin-bottom: 55rpx;
      width: 47%;
      height: 310rpx;
      border-radius: 20rpx 20rpx 0 0;

      .inl_content {
        position: absolute;
        width: 98%;
        bottom: 0rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .inox_left_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 250rpx;
        background-repeat: no-repeat;
        box-shadow: 0 4rpx 10rpx rgba(51, 51, 51, 0.37);
        background-size: cover;
        background-position: 50%;
        border-radius: 20rpx;
      }

      .inox_left_icon {
        position: absolute;
        top: 15rpx;
        right: 15rpx;
        width: 70rpx;
        height: 70rpx;
      }

      .videoBox-bottom {
        position: absolute;
        bottom: 0;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        width: 100%;
        height: 60rpx;
        background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.58)));
        color: #fff;
        font-size: 12rpx;
        border-bottom-right-radius: 13rpx;
        border-bottom-left-radius: 10rpx;

        .vib_left {
          width: 20%;
          display: flex;
          align-items: center;

          span {
            font-size: 28rpx;
            color: #FFFFFF;
          }

          image {
            margin-left: 10rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }

        .vib_right {
          width: 80%;
          display: flex;
          align-items: center;
          justify-content: flex-end;

          span {
            margin-right: 20rpx;
            font-size: 28rpx;
            color: #FFFFFF;
          }

          image {
            margin-right: 0;
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }
  }

  .indexzxitem10 {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 70rpx;

    .index_flex2 {
      display: flex;
      align-items: center;
      margin-right: 40rpx;
    }

    .index_flex {
      display: flex;
      align-items: center;
    }

    image {
      width: 40rpx;
      height: 40rpx;
    }

    img {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .cu-item_s {
    width: 130rpx;
    height: 130rpx;
    border: 1rpx solid red;
    border-radius: 50%;
    overflow: hidden;

    .fl_item_img {
      width: 100%;
      height: 100% !important;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50%;
      border-radius: 20rpx;
    }

    image {
      width: 100%;
      height: 100%;
    }
  }

  .indexbox_left {
    overflow: hidden;

    .VIP_img {
      position: absolute;
      top: 0;
      padding: 5rpx 10rpx;
      left: 0;
      z-index: 9;
      border-radius: 0rpx 0 20rpx 0;
      color: #FFFFFF;
      background: linear-gradient(90deg, #fb4376, #e6d44f);
    }
  }

  .addlog {
    bottom: 0;
  }

  .addlog1 {
    bottom: -1223rpx;
  }

  .addlog,
  .addlog1 {
    position: fixed;
    padding: 20rpx;
    z-index: 99;
    width: 100%;
    height: calc(100% - 225px);
    background-color: #FFFFFF;
    box-sizing: border-box;
    transition: all 0.5s linear;

    .guanbi {
      position: absolute;
      top: 20rpx;
      right: 20rpx;
      width: 50rpx;
      font-size: 50rpx;
      height: 50rpx;
    }

    .h1 {
      font-size: 33rpx;
      font-weight: bold;
    }

    .h2 {
      color: #999;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;

      .h3 {
        margin-right: 12rpx;
        border: 1rpx solid red;
        color: red;
        padding: 5rpx 15rpx;
        border-radius: 15rpx;
      }
    }
  }

  .play_back2 {
    position: fixed;
    bottom: 20rpx;
    z-index: 99999999999;
    left: 20rpx;
    width: 90rpx;
    height: 90rpx;

    image {
      width: 90rpx;
      height: 90rpx;
    }
  }

  .image11 {
    // margin-bottom: 30rpx;
    width: 100%;
    height: 100%;
    // text-align: center;
    border-radius: 20rpx;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;

  }

  .image22 {
    width: 100%;
    padding: 20rpx;
    border-radius: 20rpx;
  }
</style>
